<template>
<div>
  <h2>{{message}}</h2>
  <button @click="changeMessage">修改message</button>
  <hr>
  <h2>账号：{{account.username}}</h2>
  <h2>密码：{{account.password}}</h2>
  <button v-on:click="changeAccount">修改账号</button>
  <button @click="account.username='zhangsan'">修改账号</button>
  <hr>
  <h2>当前计数：{{counter}}</h2>
  <button v-on:click="increment">+1</button>
  <button @click="counter++">+1</button>
  <hr>
  <h2>当前计数：{{info.counter}}</h2>
  <button @click="info.counter.value++">+1</button>
</div>
</template>

<script>
import {ref,reactive} from "vue";

export default {
  name: "App",
  setup(props,context){
    let message="Hello Vue"
    const changeMessage=()=>{
      message='你好啊，李银河！'
      console.log("message:",message)
    }

    const account=reactive({
      username:'coderwhy',
      password:'456123'
    })

    function changeAccount(){
      account.username='lock'
    }

    let counter=ref(110)
    const increment=()=>{
      counter.value++
    }

    const info={
      counter
    }
    return{
      info,
      message,
      account,
      counter,
      increment,
      changeMessage,
      changeAccount
    }
  }
}
</script>

<style scoped>

</style>